<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass " v-if="headerShow">
        <a-form size="small" :model="pageData.queryData" layout="inline">
          <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="日期">
            <a-range-picker popup-container="html"
                            class="bacClass"
                            v-model="pageData.createTimeArr"
            />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="流转卡号">
            <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.flowCardCode"
                allow-clear
            />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="布号">
            <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.greyCode"
                allow-clear
            />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="客户名称">
            <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.productName"
                allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
              v-if="headerShow"
              @click="headerShow = false"
              :strokeWidth="2"
              :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar
            :items="['查询', '码单打印', '外单（定型剪布送成检对色贴标）标签打印']"
            @select="selectHandler"
            @MdButton="print"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          rowSelection="multiple"
          @grid-ready="gridReady"
          style="height: calc(100% - 45px)"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="table.dataList"
          :columnDefs="tc"
          :localeText="localeText1"
          :suppressRowClickSelection="true"
      ></AgGridVuesCopys>
    </template>

    <!-- <paginationCopys :page-size="pagination.pageSize" :current="pagination.page" :total="pagination.total" show-total show-jumper
            show-page-size @change="nextDoRefreshPage" @page-size-change="nextDoRefreshSize" style="justify-content: center" /> -->
    <a-modal
        draggable
        :visible="visible"
        @ok="handleOk"
        @cancel="handleNo"
        okText="打印"
        cancelText="关闭"
        unmountOnClose
        :width="794"
    >
      <template #title> 标签打印</template>
      <div id="Normal"></div>
    </a-modal>
  </pageTabelLayout>
</template>

<script lang="ts">
import {post, get} from '@/api/http'
import {useTable, usePagination, useTableColumn} from '@/hooks/table'

import {ref, reactive, onMounted} from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'
import {localeText} from '@/api/aggridZw'

import printJS from 'print-js'

interface paramData {
  id: any
  examineItem: string | undefined
  minRange: string | undefined
  maxRange: string | undefined
  choosableValue: string | undefined
  defectScore: string | undefined
  chooseScore: string | undefined
  remark: string | undefined
}

export default {
  //标签打印
  name: 'LabelPrinting',
  setup() {
    //隐藏显示头部
    const headerShow = ref<boolean>(true)
    const pageData = reactive<{
      pageLoading: boolean
      labelColFlex: string
      queryData: any
      createTimeArr: any
    }>({
      pageLoading: false,
      labelColFlex: '120px',
      createTimeArr: [],
      queryData: {
        flowCardCode: '',
        greyCode: '',
        productName: '',
        startDate: '',
        endDate: '',
      },
    })
    //查询列表
    onMounted(() => {
      selectHandler()
    })

    //切换分页
    const nextDoRefreshPage = (val: any) => {
      pagination.page = val
      doRefresh()
    }
    const nextDoRefreshSize = (val: any) => {
      pagination.pageSize = val
      doRefresh()
    }
    const pagination = usePagination(doRefresh)
    const table = useTable()

    function doRefresh() {
      pageData.pageLoading = true
      if (pageData.createTimeArr == undefined) {
        pageData.createTimeArr = []
      }
      pageData.queryData.startDate = pageData.createTimeArr[0]
      pageData.queryData.endDate = pageData.createTimeArr[1]
      post({
        url: 'aps/circulatCard/seleteBQ',
        data: pageData.queryData,
      })
          .then(({data, code}: any) => {
            if (code === 200) {
              table.handleSuccess(data)
              pagination.setTotalSize(0)
              gridOption.value.setRowData(data)
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
    }

    //查询
    const selectHandler = () => {
      pagination.page = 1
      doRefresh()
    }

    // 表格准备事件
    const tableColumns = useTableColumn([
      {
        title: '流转卡号',
        key: 'flowCardCode',
        dataIndex: 'flowCardCode',
      },
      {
        title: '客户名称',
        key: 'customName',
        dataIndex: 'customName',
      },
      {
        title: '计划单号',
        key: 'planOrderCode',
        dataIndex: 'planOrderCode',
      },
      {
        title: '客户订单号',
        key: 'clientPlanOrderCode',
        dataIndex: 'clientPlanOrderCode',
      },
      {
        title: '布号',
        key: 'productName',
        dataIndex: 'productName',
      },
      {
        title: '匹数',
        key: 'houseNum',
        dataIndex: 'houseNum',
      },
      {
        title: '色号',
        key: 'colorCode',
        dataIndex: 'colorCode',
      },
      {
        title: '门幅',
        key: 'efficacious',
        dataIndex: 'efficacious',
      },

      {
        title: '克重',
        key: 'gramWeight',
        dataIndex: 'gramWeight',
      },
      {
        title: '确认色',
        key: 'affirmColor',
        dataIndex: 'affirmColor',
      },
      {
        title: '坯布编号',
        key: 'greyBatch',
        dataIndex: 'greyBatch',
      },
      {
        title: '坯布名称',
        key: 'greyName',
        dataIndex: 'greyName',
      },
      {
        title: '成品重量',
        key: 'warnt',
        dataIndex: 'warnt',
      },
      {
        title: '交货日期',
        key: 'initialDeliveryTime',
        dataIndex: 'initialDeliveryTime',
      },
    ])
    const gridOption = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1
    }
    let tc: any[] = tableColumns.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        width: o.width,
      }
      return obj
    })
    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tc = a.concat(tc)
    const localeText1: any = ref(localeText)
    let visible = ref(false)
    const handleOk = () => {
      printJS({
        printable: 'Normal',
        type: 'html',
        targetStyles: ['*'],
      })
    }
    const print = () => {
      visible.value = true
    }
    //取消打印
    const handleNo = () => {
      visible.value = false
    }
    return {
      pagination,
      table,
      pageData,
      selectHandler,
      headerShow,
      nextDoRefreshPage,
      nextDoRefreshSize,
      defaultColDef,
      localeText1,
      tc,
      gridReady,
      gridOption,
      handleOk,
      print,
      handleNo,
      visible,
    }
  },
  components: {Toolbar, },
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-picker input) {
  padding-left: 0 !important;
}

:deep(.arco-picker) {
  padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
  padding: 0 !important;
}
</style>
